import React, {FormEvent, useMemo, useState} from "react";
import {useAuth} from "../context/auth-context";
import {Form, Button, Input} from "antd";
import {LongButton} from "./index";
import {useAsync} from "utils/use-async";

export const LoginScreen = ({onError}: { onError: (error: Error) => void }) => {
    const {login, user} = useAuth()
    const {run, isLoading} = useAsync(undefined, {throwOnError: true})
    const [cont, setCont] = useState(1)
    const [val, setVal] = useState('')

    const expensive = useMemo(() => {
        console.log('compute')
        let sum = 0
        for (let i = 0; i < cont * 100; i++) {
            sum += i
        }
        return sum
    }, [cont])

    const handleSubmit = async (values: { username: string, password: string }) => {
        try {
            await run(login(values))
        } catch (e) {
            console.log(e)
            onError(e)
        }
    }
    return (
        // <div>
        //     <h4>{cont}-{val}-{expensive()}</h4>
        //     <div>
        //         <button onClick={() => setCont(cont + 1)}>+c1</button>
        //         <input value={val} onChange={event => setVal(event.target.value)}/>
        //     </div>
        // </div>
        <Form onFinish={handleSubmit}>
            <Form.Item>
            </Form.Item>
            <Form.Item name={'username'} rules={[{required: true, message: '请输入用户名'}]}>
                <Input placeholder={'用户名'} type={"text"} id={"username"}/>
            </Form.Item>
            <Form.Item name={'password'} rules={[{required: true, message: '请输入用户密码'}]}>
                <Input placeholder={'密码'} type={"password"} id={"password"}/>
            </Form.Item>
            <Form.Item>
                <LongButton loading={isLoading} type={"primary"} htmlType="submit">登录</LongButton>
            </Form.Item>
        </Form>
    )
}
